<template>
  <view class="activity_c">
    <view class="activity_item" @click="gotoTimeup">
      <view class="activity_item_header">
        <image class="image1" src="@/static/images/huodong_logo1.png"></image>
        <u-count-down
          :time="downTime"
          @finish="finish"
          format="HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
        >
          <view class="time">
            <view class="time__custom">
              <text class="time__custom__item">{{
                timeData?.hours >= 10 ? timeData?.hours : '0' + timeData?.hours
              }}</text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
              <text class="time__custom__item">{{
                timeData?.minutes >= 10 ? timeData?.minutes : '0' + timeData?.minutes
              }}</text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
              <text class="time__custom__item">{{
                timeData?.seconds >= 10 ? timeData?.seconds : '0' + timeData?.seconds
              }}</text>
            </view>
          </view>
        </u-count-down>
        <!-- <view class="activity_item_header_time">
                    <view class="card">02</view>:
                    <view class="card">49</view>:
                    <view class="card">46</view>
                </view> -->
      </view>
      <view class="activity_item_content">
        <h-not-list title="" v-if="!props.list || !props.list?.length"></h-not-list>
        <block v-else>
          <view
            class="activity_item_content_item"
            v-show="index < 2"
            v-for="(item, index) in props.list"
            :key="index"
          >
            <image :src="item?.image" mode="aspectFill"></image>
            <view class="activity_item_content_item_right">
              <view>
                <view class="u-line-2 name">{{ item?.store_name }}</view>
              </view>
              <view class="activity_item_content_item_r_ft">
                <view class="price">
                  <text class="text">￥</text>
                  <text class="u-line-1">{{ item?.price }}</text>
                </view>
                <view
                  class="discount"
                  v-show="item?.price.length <= 4"
                  v-if="item?.rate || item?.discount"
                >
                  {{ item?.rate || item?.discount }}<text>折</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <view class="activity_item" @click="navigateTo('/pages/index/good-shops-near', 0)">
      <view class="activity_item_header">
        <image class="image2" src="@/static/images/huodong_logo2.png"></image>
        <view class="activity_item_header_hot">专属推荐</view>
      </view>
      <view class="activity_item_content">
        <h-not-list title="" v-if="!props.list1 || !props.list1?.length"></h-not-list>
        <block v-else>
          <view class="activity_item_content_item" v-for="item in props.list1" :key="item?.mer_id">
            <image :src="item?.mer_avatar" mode="aspectFill"></image>
            <view class="activity_item_content_item_right">
              <view>
                <view class="name">{{ item?.mer_name?.substring(0, 7) }}</view>
              </view>
              <view class="tabs">
                <view class="tab" v-for="(tag, j) in changeArr(item?.tags)" :key="j">{{
                  tag
                }}</view>
              </view>
              <view class="activity_item_content_item_r_ft">
                <view class="map_c" v-if="item?.distance">
                  <u-icon name="map" size="12" color="#828282"></u-icon>
                  <view class="map_size">{{ item?.distance }}</view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { navigateTo, showToast } from '@/utils'
import { onShow } from '@dcloudio/uni-app'
const downTime = ref('')

onShow(() => {
  getDownTime()
})
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  list1: {
    type: Array,
    default: () => [],
  },
})
console.log(props.list)

const emit = defineEmits(['updateHotCardList', 'toLogin'])
function gotoTimeup() {
  const ids = []
  for (let index = 0; index < 2; index++) {
    const element = props.list[index]
    ids.push(element?.product_id)
    if (ids.length == 2) {
      return navigateTo('/pages/index/time-up?id=' + ids.join(','), 0)
    }
  }
}
// function toLogin() {
//   emit('toLogin')
// }

function changeArr(arr) {
  console.log(arr)
  let newArr = []
  for (let i = 0; i < arr?.length; i++) {
    if (arr[i]?.length == 4) {
      newArr.push(arr[i])
      if (newArr?.length == 1) {
        return newArr
      }
    } else if (arr[i]?.length == 3) {
      newArr.push(arr[i])
      if (newArr?.length >= 2) {
        return newArr
      }
    } else if (arr[i]?.length <= 2) {
      newArr.push(arr[i])
      if (newArr?.length >= 3) {
        return newArr
      }
    } else {
      newArr.push(arr[i])
    }
  }
  return newArr
}
const timeData = ref({})
function onChange(e) {
  timeData.value = e
}
function getDownTime() {
  const now = new Date()
  const target = new Date(
    `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} 10:00:00`,
  ).getTime()
  const nowTime = now.getTime()
  downTime.value = nowTime > target ? 24 * 60 * 60 * 1000 - (nowTime - target) : target - nowTime
}
function finish() {
  getDownTime()
  emit('updateHotCardList')
}
</script>

<style lang="scss" scoped>
.activity_c {
  padding: 0 25rpx;
  width: 100%;
  height: 312rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;

  .activity_item {
    width: 48.8%;
    height: 312rpx;
    background: url('/static/images/back.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 19rpx 22rpx 17rpx;

    .activity_item_header {
      width: 100%;
      height: 76rpx;
      padding-bottom: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .time {
        @include flex;
        align-items: center;
        margin-left: 14rpx;

        &__custom {
          width: 36rpx;
          height: 38rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
          background-color: #c1272d;
          border-radius: 4rpx;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;

          &__item {
            color: #fff;
            font-size: 12px;
            text-align: center;
          }
        }

        &__doc {
          color: #c1272d;
          padding: 0px 4px;
        }

        &__item {
          color: #606266;
          font-size: 15px;
          margin-right: 4px;
        }
      }

      .image1 {
        width: 151rpx;
        height: 34rpx;
        // margin-right: 15rpx;
      }

      .image2 {
        width: 143rpx;
        height: 34rpx;
      }

      .activity_item_header_time {
        width: 148rpx;
        height: 38rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #c1272d;

        .card {
          width: 36rpx;
          height: 38rpx;
          background: #c1272d;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          color: #ffffff;
          font-weight: 500;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .activity_item_header_hot {
        width: 136rpx;
        height: 38rpx;
        background: url('@/static/images/fire.png') center center;
        background-size: 100% 100%;
        font-weight: 600;
        font-size: 21rpx;
        color: #c1272d;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 39rpx;
      }
    }

    .activity_item_content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1;

      .not-content {
        height: auto !important;
      }

      .activity_item_content_item {
        width: 100%;
        height: 98rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 131rpx;
          height: 98rpx;
          background: #eee;
          border-radius: 10rpx;
        }

        .activity_item_content_item_right {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          margin-left: 16rpx;

          .name {
            width: 168rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #000000;
          }

          .tabs {
            width: 100%;
            height: 27rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .tab {
              height: 27rpx;
              margin-right: 8rpx;
              padding: 0 1rpx;
              border: 1rpx solid #c1272d;
              border-radius: 4rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 500;
              font-size: 19rpx;
              font-family: PingFang SC, PingFang SC;
              color: #c1272d;
              line-height: 25rpx;
            }
          }

          .activity_item_content_item_r_ft {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .map_c {
              width: 100%;
              display: flex;
              align-items: center;

              .map_size {
                font-weight: 500;
                font-size: 18rpx;
                color: #828282;
                margin-left: 4rpx;
              }
            }

            .price {
              font-weight: 800;
              font-size: 25rpx;
              color: #c1272d;
              display: flex;
              align-items: center;

              .text {
                font-weight: 600;
                font-size: 19rpx;
                color: #c1272d;
              }
            }

            .discount {
              width: 82rpx;
              height: 26rpx;
              background: url('@/static/images/discount_logo.png') center center;
              background-size: 100% 100%;
              font-weight: 600;
              font-size: 21rpx;
              color: #c1272d;
              padding-left: 26rpx;
              display: flex;
              align-items: center;
              justify-content: center;

              text {
                font-weight: 500;
                font-size: 13rpx;
                color: #c1272d;
              }
            }
          }
        }
      }
    }
  }
}
</style>
